<template>
    <div class="app">
        <Crumb></Crumb>
        <div class="details-box">
            <h2>{{propser}}</h2>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="136"  label-position="left">
        <FormItem  prop="name" class="label">
            <label for="" class="required">{{propser_name}}</label>
            <Input v-model="formValidate.name" :placeholder="propser_name_info"></Input>
        </FormItem>
         <FormItem  prop="name" class="label">
            <label for="" class="required">{{propser_company}}</label>
            <Input v-model="formValidate.name" ></Input>
        </FormItem>
         <FormItem  prop="name" class="label">
             <label for="" class="required">{{propser_department}}</label>
            <Input v-model="formValidate.name" ></Input>
        </FormItem>
         <FormItem  prop="name" class="label">
            <label for="" class="required">{{propser_telephone}}</label>
            <Input v-model="formValidate.name"></Input>
        </FormItem>

         <FormItem  prop="name" class="label">
           <label for="" class="required">{{propser_phone}}</label>
            <Input v-model="formValidate.name" :placeholder="propser_phone_info"></Input>
        </FormItem>
         <FormItem  prop="name" class="label">
            <label for="" class="required">{{propser_address}}</label>
            <Input v-model="formValidate.name"></Input>
        </FormItem> <FormItem  prop="name" class="label">
            <label for="" class="required">{{propser_email}}</label>
            <Input v-model="formValidate.name" :placeholder="propser_email_info"></Input>
        </FormItem>
         <FormItem  prop="name" class="label">
            <label for="" class="required">{{propser_idnumber}}</label>
            <Input v-model="formValidate.name" :placeholder="propser_idnumber_info"></Input>
        </FormItem>
    </Form>
           <label for="" class="required_self">{{propser_idfront}}</label>
            <div class="img-box">
                <div class="photo-box">
                    <div class="img-left">
                        <div class="photo-frame">
                            <img src="" alt="">
                            <Icon type="image"></Icon>
                        </div>
                        <input type="file" @change='btnIMg'>
                        <div class="photo-btn">{{aptitude_selectimg}}</div>
                    </div>
                    <div class="img-right">
                        <h4>{{propser_frontimg}}</h4>
                        {{propser_idfront_info}}
                    </div>
                </div>
            </div>
            <label for="" class="required_self">{{propser_idcontrary}}</label>
            <div class="img-box">
                <div class="photo-box">
                    <div class="img-left">
                        <div class="photo-frame">
                            <img src="" alt="">
                            <Icon type="image"></Icon>
                        </div>
                        <input type="file" @change='btnIMg'>
                        <div class="photo-btn">{{aptitude_selectimg}}</div>
                    </div>
                    <div class="img-right">
                        <h4>{{propser_contraryimg}}</h4>
                        {{propser_idfront_info}}
                    </div>
                </div>
            </div>
            <!--
                    企业资质信息
                -->
            <h2>{{aptitude}}</h2>
            <label for="" class="required">{{aptitude_company}}</label>
            <input type="text" :placeholder="aptitude_company_info">
            <label for="" class="required">{{aptitude_ifwork}}</label>
            <input type="text" :placeholder="aptitude_ifwork_info">
            <label for="" class="required">{{aptitude_name}}</label>
            <input type="text" :placeholder="aptitude_blinfo">
            <label for="" class="required">{{aptitude_blregistration}}</label>
            <input type="text" :placeholder="aptitude_blinfo">
            <label for="" class="required">{{aptitude_aladdress}}</label>
            <input type="text" :placeholder="aptitude_blinfo">
            <label for="" class="required">{{aptitude_bldate}}</label>
            <input type="text" :placeholder="aptitude_blinfo">
            <label for="" class="required">{{aptitude_bscope}}</label>
            <input type="text" :placeholder="aptitude_blsame">
            <label for="">{{aptitude_scale}}</label>
            <input type="text" :placeholder="aptitude_staffnum">
            <label for="" class="required">{{aptitude_ifworkid}}</label>
            <div class="img-box">
                <div class="photo-box">
                    <div class="img-left">
                        <div class="photo-frame">
                            <img src="" alt="">
                            <Icon type="image"></Icon>
                        </div>
                        <input type="file" @change='btnIMg'>
                        <div class="photo-btn">{{aptitude_selectimg}}</div>
                    </div>
                    <div class="img-right">
                        {{aptitude_effrange}}<br> {{aptitude_require}}
                        <br> {{aptitude_imgstyle}}
                    </div>
                </div>
            </div>
            <label for="" class="required">{{aptitude_blimg}}</label>
            <div class="img-box">
                <div class="photo-box">
                    <div class="img-left">
                        <div class="photo-frame">
                            <img src="" alt="">
                            <Icon type="image"></Icon>
                        </div>
                        <input type="file" @change='btnIMg'>
                        <div class="photo-btn">{{aptitude_selectimg}}</div>
                    </div>
                    <div class="img-right">
                        {{aptitude_blrequire}}</br>
                        {{aptitude_require}}</br>
                        {{aptitude_imgstyle}}
                    </div>
                </div>
            </div>
            <!--
                
            -->
            <div class="details-btn">
                <button type="button" class="btn">{{aptitude_btn}}</button>
            </div>
        </div>
    </div>
</template>

<script>
    import _i from "@/i18n/index";
    import Requester from "@/base/requester";
    import catchError from "@/base/catchError";
    import API from "@/config/api";
    import Route from "@2dfire/utils/router";
    let pageData = {
        propser:_i ('VERIFY.APP.MATERIAL.PROPSER'),
        propser_name:_i ('VERIFY.APP.MATERIAL.PROPSER.NAME'),
        propser_name_info:_i ('VERIFY.APP.MATERIAL.PROPSER.NAME.INFO'),
        propser_company:_i ('VERIFY.APP.MATERIAL.PROPSER.COMPANY'),
        propser_department:_i ('VERIFY.APP.MATERIAL.PROPSER.DEPARTMENT'),
        propser_telephone:_i ('VERIFY.APP.MATERIAL.PROPSER.TELEPHONE'),
        propser_phone:_i ('VERIFY.APP.MATERIAL.PROPSER.PHONE'),
        propser_phone_info:_i ('VERIFY.APP.MATERIAL.PROPSER.PHONE.INFO'),
        propser_address:_i ('VERIFY.APP.MATERIAL.PROPSER.ADDRESS'),
        propser_email:_i ('VERIFY.APP.MATERIAL.PROPSER.EMAIL'),
        propser_email_info:_i ('VERIFY.APP.MATERIAL.PROPSER.EMAIL.INFO'),
        propser_idnumber:_i ('VERIFY.APP.MATERIAL.PROPSER.IDNUMBER'),
        propser_idnumber_info:_i ('VERIFY.APP.MATERIAL.PROPSER.IDNUMBER.INFO'),
        propser_idfront:_i ('VERIFY.APP.MATERIAL.PROPSER.IDFRONT'),
        propser_frontimg:_i ('VERIFY.APP.MATERIAL.PROPSER.FRONTIMG'),
        propser_idfront_info:_i ('VERIFY.APP.MATERIAL.PROPSER.IDFRONT.INFO'),
        propser_idcontrary:_i ('VERIFY.APP.MATERIAL.PROPSER.IDCONTRARY'),
        propser_contraryimg:_i ('VERIFY.APP.MATERIAL.PROPSER.CONTRARYIMG'),

        aptitude:_i ('VERIFY.APP.MATERIAL.APTITUDE'),
        aptitude_company:_i ('VERIFY.APP.MATERIAL.APTITUDE.COMPANY'),
        aptitude_company_info:_i ('VERIFY.APP.MATERIAL.APTITUDE.COMPANY.INFO'),
        aptitude_ifwork:_i ('VERIFY.APP.MATERIAL.APTITUDE.IFWORK'),
        aptitude_ifwork_info:_i ('VERIFY.APP.MATERIAL.APTITUDE.IFWORK.INFO'),
        aptitude_name:_i ('VERIFY.APP.MATERIAL.APTITUDE.NAME'),
        aptitude_blinfo:_i ('VERIFY.APP.MATERIAL.APTITUDE.BLINFO'),
        aptitude_blregistration:_i ('VERIFY.APP.MATERIAL.APTITUDE.BLREGISTRATION'),
        aptitude_aladdress:_i ('VERIFY.APP.MATERIAL.APTITUDE.ALADDRESS'),
        aptitude_bldate:_i ('VERIFY.APP.MATERIAL.APTITUDE.BLDATE'),
        aptitude_bscope:_i ('VERIFY.APP.MATERIAL.APTITUDE.BSCOPE'),
        aptitude_blsame:_i ('VERIFY.APP.MATERIAL.APTITUDE.BLSAME'),
        aptitude_scale:_i ('VERIFY.APP.MATERIAL.APTITUDE.SCALE'),
        aptitude_staffnum:_i ('VERIFY.APP.MATERIAL.APTITUDE.STAFFNUM'),
        aptitude_ifworkid:_i ('VERIFY.APP.MATERIAL.APTITUDE.IFWORKID'),
        aptitude_effrange:_i ('VERIFY.APP.MATERIAL.APTITUDE.EFFRANGE'),
        aptitude_require:_i ('VERIFY.APP.MATERIAL.APTITUDE.REQUIRE'),
        aptitude_imgstyle:_i ('VERIFY.APP.MATERIAL.APTITUDE.IMGSTYLE'),
        aptitude_blimg:_i ('VERIFY.APP.MATERIAL.APTITUDE.BLIMG'),
        aptitude_blrequire:_i ('VERIFY.APP.MATERIAL.APTITUDE.BLREQUIRE'),
        aptitude_selectimg:_i ('VERIFY.APP.MATERIAL.APTITUDE.SELECTIMG'),
        aptitude_btn:_i ('VERIFY.APP.MATERIAL.APTITUDE.BTN'),
          formValidate: {
                    name: '',
                    mail: '',
                    city: '',
                    gender: '',
                    interest: [],
                    date: '',
                    time: '',
                    desc: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                    ],
                    city: [
                        { required: true, message: 'Please select the city', trigger: 'change' }
                    ],
                    gender: [
                        { required: true, message: 'Please select gender', trigger: 'change' }
                    ],
                    interest: [
                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
                        { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
                    ],
                    date: [
                        { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
                    ],
                    time: [
                        { required: true, type: 'date', message: 'Please select time', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
                        { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
                    ]
                }
    }
    export default {
        data() {
            return pageData;
        },
        components: {
            Crumb: require("@/components/Crumb.vue"),
        },
        methods: {
            getOnloadFunc(aImg) {
                return function (evt) {
                    aImg.src = evt.target.result;
                }
            },
            btnIMg(event) {
                let input = event.target
                console.dir(input)
                for (var i = 0, numFiles = input.files.length; i < numFiles; i++) {
                    var file = input.files[i];
                    console.log(file)
                    console.log(file.type.match(/image.*/))
                    if (!file.type.match(/image.*/)) {
                        continue;
                    }
                    console.dir(input.previousElementSibling)
                    let img = input.previousElementSibling.children[0]
                    let reader = new FileReader();
                    reader.onload = this.getOnloadFunc(img);
                    reader.readAsDataURL(file);
                }
            },
            judge(event){
 
                console.log(event.target.value)
            }
        },
        created() {
        }
    }

</script>

<style lang="scss" scoped="">
    .details-box {
        width: 480px;
        margin: 0 auto;
        color: #333333;
    }
    
    .details-box h2 {
        font-family: PingFangSC-Medium;
        margin-top: 50px;
        font-size: 16px;
        padding-bottom: 15px;
        border-bottom: 1px solid #DEDEDE;
    }
    
    .details-box input[type='text'],
    .img-box {
        width: 340px;
        height: 34px;
        margin-top: 18px;
        border: 1px solid #DEDEDE;
        border-radius: 2px;
    }
    
    .details-box input[type='text'] {
        padding: 0 10px;
    }
    
    .details-box label {
        display: inline-block;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        /*vertical-align: top;
        margin-top: 24px;*/
        position: absolute;
        left:-136px;
    }
    
    .required::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 50px;
        background: #B11A1B;
        position: relative;
        left: -5px;
        top: -4px;
    }
    
    .img-box {
        height: 189px;
        display: inline-block;
        text-align: center;
        padding: 0 15px;
    }
    
    .ivu-icon {
        position: absolute;
        top: 33px;
        left: 0;
        font-size: 20px;
        width: 100%;
        text-align: center;
        color: #999999;
    }
    
    .img-left {
        width: 102px;
        background: #F9F9F9;
        border: 1 solid #DEDEDE;
        border-radius: 2px;
        height: 107px;
        position: relative;
    }
    
    .img-left input {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 3;
        opacity: 0;
    }
    
    .photo-box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .photo-frame {
        width: 100%;
        height: 86px;
        position: relative;
    }
    
    .photo-frame img {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 500;
        left: 0;
        top: 0;
    }
    
    .photo-btn {
        width: 100%;
        height: 21px;
        background: #C42022;
        border-radius: 0 0 2px 2px;
        position: absolute;
        bottom: 0;
        color: #fff;
    }
    
    .img-right {
        text-align: left;
        width: calc(100% - 117px);
        margin-left: 15px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #333333;
    }
    
    .img-right h4 {
        font-size: 14px;
        line-height: 28px;
    }
    
    .details-btn {
        width: 100%;
        margin: 45px auto 67px auto;
        text-align: center;
        font-size: 14px;
    }
    
    .btn {
        background: #C42022;
        border-radius: 4px;
        color: #fff;
        width: 86px;
        height: 34px;
        border-width: 0;
    }
    .label{
        height: 34px;
        margin: 18px 0 0 0;
        position: relative;
    }
</style>